<!DOCTYPE html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../../docs/images/pyxel_icon_64x64.ico" />
    <title>Pyxel Web Examples</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>

    <style type="text/tailwindcss">
      @layer components {
        .link {
          @apply outline-none focus:ring-1 focus:ring-indigo-300 text-indigo-400 hover:text-indigo-300 underline underline-offset-2;
        }
        .card {
          @apply bg-gray-800 shadow-sm px-6 py-4 border border-gray-700 rounded-2xl;
        }
        .page {
          @apply bg-gray-900 h-full text-gray-100 antialiased;
        }
        .container {
          @apply mx-auto p-6 max-w-3xl;
        }
      }
    </style>
  </head>

  <body class="page">
    <main class="container">
      <header class="mb-4">
        <h1 class="font-semibold text-2xl tracking-tight">
          Pyxel Web Examples
        </h1>
        <p class="mt-2 text-gray-300 text-sm">
          Examples of the WebAssembly version of
          <a href="https://github.com/kitao/pyxel" class="link">Pyxel</a>, a
          retro game engine for Python.
        </p>
      </header>

      <section class="card">
        <ul class="gap-4 space-y-1 columns-1 md:columns-2 text-sm">
          <li><a href="script-test.html" class="link">script_test</a></li>
          <li><a href="01-hello-pyxel.html" class="link">01_hello_pyxel</a></li>
          <li><a href="02-jump-game.html" class="link">02_jump_game</a></li>
          <li><a href="03-draw-api.html" class="link">03_draw_api</a></li>
          <li><a href="04-sound-api.html" class="link">04_sound_api</a></li>
          <li>
            <a href="05-color-palette.html" class="link">05_color_palette</a>
          </li>
          <li><a href="06-click-game.html" class="link">06_click_game</a></li>
          <li><a href="07-snake.html" class="link">07_snake</a></li>
          <li>
            <a href="08-triangle-api.html" class="link">08_triangle_api</a>
          </li>
          <li><a href="09-shooter.html" class="link">09_shooter</a></li>
          <li><a href="10-platformer.html" class="link">10_platformer</a></li>
          <li><a href="11-offscreen.html" class="link">11_offscreen</a></li>
          <li>
            <a href="12-perlin-noise.html" class="link">12_perlin_noise</a>
          </li>
          <li><a href="13-bitmap-font.html" class="link">13_bitmap_font</a></li>
          <li><a href="14-synthesizer.html" class="link">14_synthesizer</a></li>
          <li>
            <a href="15-tiled-map-file.html" class="link">15_tiled_map_file</a>
          </li>
          <li><a href="16-transform.html" class="link">16_transform</a></li>
          <li>
            <a href="17-app-launcher.html" class="link">17_app_launcher</a>
          </li>
          <li>
            <a href="30sec-of-daylight.html" class="link">30sec_of_daylight</a>
          </li>
          <li><a href="megaball.html" class="link">megaball</a></li>
          <li><a href="image-editor.html" class="link">image_editor</a></li>
          <li><a href="tilemap-editor.html" class="link">tilemap_editor</a></li>
          <li><a href="sound-editor.html" class="link">sound_editor</a></li>
          <li><a href="music-editor.html" class="link">music_editor</a></li>
        </ul>
      </section>

      <section class="mt-4">
        <p class="text-gray-300 text-sm">
          The HTML files can be referenced
          <a
            href="https://github.com/kitao/pyxel/tree/main/wasm/examples"
            class="link"
            >here</a
          >.
        </p>
        <p class="mt-2 text-gray-300 text-sm">
          For specific instructions, please refer to
          <a
            href="https://github.com/kitao/pyxel/blob/main/docs/pyxel-web-en.md"
            class="link"
            >this page</a
          >
          (<a
            href="https://github.com/kitao/pyxel/blob/main/docs/pyxel-web-ja.md"
            class="link"
            >日本語</a
          >).
        </p>
      </section>
    </main>
  </body>
</html>
